<template>
    <div id="app">
        <router-view/>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default{
    name:"App",
    computed:{
        ...mapGetters(['routerList']),
        
    },
    mounted(){
        this.setRouter(this.list);
    },
    data(){
        return {
            list:[{ path: '/home',name: 'home',meta:{title:'首页'}}],
        }
    },
    //监听路由变化
    watch:{
        $route(to,from){
            let matched = to.matched;
            this.setDefaultActive(matched[1].path)
            for(let i = 0; i< this.list.length;i++){
                if(to.fullPath=="/login" || this.list[i].path == matched[1].path){
                    return;
                }
            }
            this.list.push({path:matched[1].path,name:matched[1].name,meta:matched[1].meta})
            this.setRouter(this.list);
        }
    },
    methods:{
        ...mapMutations({setRouter:'SETROUTERLIST',setDefaultActive:'SETDEFAULRACTIVE'})
    }
}
</script>

<style lang="less">
*{
    margin: 0;
    padding: 0;
}
#app{
    height: 100vh;
    width: 100vw;
    .el-menu{
        border-right: 0px;
    }
}
.main{
    min-height: calc(100vh - 150px);
    background: white;
    box-shadow: 2px 4px 30px 3px rgba(0,0,0,.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;
}
.point{
    cursor: pointer;
}


/*滚动条样式*/
.scrollber::-webkit-scrollbar {
    width: 4px;    
    /*height: 4px;*/
}
.scrollber::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.scrollber::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
</style>
